import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../views/login.vue'
import { status } from "../api/user";

// js使用vuex必须引入
import store from '../store'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'login',
    component: login
  },
  {
    path: '/main',
    name: 'main',
    component: () => import('../views/main.vue'),
    redirect: '/welcome',
    children: [
      {
        path: '/welcome',
        name: '系统管理首页',
        icon: 'el-icon-s-data',
        component: () => import('../views/welcome.vue'),
        meta: {}
      },
      {
        path: '/system',
        name: '系管理',
        icon: 'el-icon-s-platform',
        component: () => import('../views/system.vue'),
        meta: {
          permission: '1'
        }
      },
      {
        path: '/major',
        name: '专业管理',
        icon: 'el-icon-place',
        component: () => import('../views/major.vue'),
        meta: {
          permission: '2'
        }
      },
      {
        path: '/class',
        name: '班级管理',
        icon: 'el-icon-discount',
        component: () => import('../views/class.vue'),
        meta: {
          permission: '4'
        }
      },
      {
        path: '/student',
        name: '学生管理',
        icon: 'el-icon-s-custom',
        component: () => import('../views/student.vue'),
        meta: {
          permission: '8'
        }
      },
      {
        path: '/teacher',
        name: '教师管理',
        icon: 'el-icon-s-check',
        component: () => import('../views/teacher.vue'),
        meta: {
          permission: '16'
        }
      },
      {
        path: '/lesson',
        name: '课程管理',
        icon: 'el-icon-s-flag',
        component: () => import('../views/lesson.vue'),
        meta: {
          permission: '32'
        }
      },
      {
        path: '/lesson-edit',
        name: '选课修改',
        icon: 'el-icon-edit',
        component: () => import('../views/lesson-edit.vue'),
        meta: {
          permission: '64'
        }
      },
      {
        path: '/admin-edit',
        name: '管理员管理',
        icon: 'el-icon-video-camera-solid',
        component: () => import('../views/admin-edit.vue'),
        meta: {
          permission: '128'
        }
      },
      {
        path: '/admin-edit-component',
        name: '管理员管理-全局?',
        icon: 'el-icon-video-camera-solid',
        component: () => import('../views/admin-edit-component/admin-edit-component.vue'),
        meta: {
          permission: '128'
        }
      },
    ]
  },
  {
    path: '/401',
    name: '401',
    component: () => import('../views/401.vue'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 路由守卫
router.beforeEach(async (to, from, next) => {
  // to 去哪个页面        这有next是函数
  // from  从哪个页面来
  // next 函数，用来放行，不放行不能走
  console.log(store.state.login.myname.loggedIn, 'store.state.login.myname.loggedIn');
  console.log(store, 'store');
  console.log(store.state.login, 'store.state.login');
  console.log(to, 'to');

  if (store.state.login.myname.loggedIn) {
    // 如果登录了，放行去主页面
    // 如果是登录界面，就放行去主界面
    if (to.path == '/') {
      next('/main')
    } else {
      // 使用接口来检测是否是连接成功
      // 使用异步转同步 async await
      let ret = await status()
      console.log(ret, 'ret');
      if (ret.data.loggedIn) {
        // 如果不是登录界面,就直接放行
        // 但是得先判断是否有权限进入
        if (store.state.login.myname.group.indexOf(to.meta.permission) != -1 || !to.meta.permission) {
          next()
        } else {
          next('/401')
        }
      } else {
        // 连接不成功，清除vuex
        store.commit("login/changemyname", {})
        next("/")
      }

    }
  } else {
    // 如果没登录，是登录页就放行，不是登录页就去登录页
    if (to.path == '/') {
      next()
    } else {
      next('/')
    }
  }
})

export default router
